<template>
    <div class="container-wrap">
        <div class="my-list">
            <div class="line">
                <label for="old">原密码</label>
                <input v-model="oldPassword" type="password" name="old" placeholder="请输入原密码" maxlength="12" minlength="6">
            </div>
            <div class="line">
                <label for="new">新密码</label>
                <input v-model="newPassword" type="password" name="new" placeholder="请输入新密码(6-12个字符)" maxlength="12" minlength="6">
            </div>
            <div class="line">
                <label for="confire">确认密码</label>
                <input v-model="confirmPassword"  type="password" name="confirm" placeholder="请重新输入新密码" maxlength="12" minlength="6">
            </div>
        </div>
        <button @click="save" class="save-button">保存修改</button>
        <van-toast id="van-toast" />
    </div>
</template>

<script>
    import { EditPassWord } from '@/providers/service'
    import { md5Encoder } from '@/providers/Func'

    export default {
        name: 'my/changePassword',
        data () {
            return {
                oldPassword:'',
                newPassword:'',
                confirmPassword:'',
            }
        },
        methods: {
            save(){
                if(wx.getStorageSync('userInfo').Password !== md5Encoder(this.oldPassword)){
                    this.$toast('原密码不正确')
                    return false
                }
                if(this.newPassword.length === 0){
                    this.$toast('新密码为空')
                    return false
                }else  if(this.newPassword.length<6){
                    this.$toast('新秘密长度不能小于6')
                    return false
                }else if(wx.getStorageSync('userInfo').Password === md5Encoder(this.newPassword)){
                    this.$toast('新密码与旧密码一致')
                    return false
                }

                if(this.confirmPassword.length===0){
                    this.$toast('确认密码为空')
                    return false
                }else  if(this.confirmPassword.length<6){
                    this.$toast('确认密码长度不能小于6')
                    return false
                }
                if(this.newPassword !== this.confirmPassword){
                    this.$toast('新密码与确认密码不一致')
                    return false
                }
                this.EditPassWordFn()
            },
            async EditPassWordFn(){
                try{
                    let params = {}
                    params.UserID = wx.getStorageSync('userInfo').UserID
                    params.Password = wx.getStorageSync('userInfo').Password
                    params.NewPassWord = md5Encoder(this.newPassword)
                    let res = await EditPassWord(params)
                    if(!res){
                        this.$toast('修改密码成功')
                        setTimeout(()=>{
                            wx.redirectTo({url:"/pages/login/index"})
                        },1000)
                    }
                }catch(err){
                    console.log(err)
                }
            },
            formInit(){
                this.oldPassword = ""
                this.newPassword = ""
                this.confirmPassword = ""
            }
        },
        mounted () {
            this.formInit()
        },
    }
</script>

<style lang="less" scoped>
    page {
        height: 100%;
        width: 100%;

    }
    .container-wrap{
        width:100%;
        height:100%;

        .save-button{
            width:326rpx;
            height:76rpx;
            line-height:76rpx;
            margin-top:165rpx;
            color:#FFF;
            background:#ff9900;
            font-size:24rpx;
            border-radius:0px;
        }


        .my-list{
            margin: 64rpx 40rpx 0rpx 40rpx;
            .line{
                height:60rpx;
                display:flex;
                margin:30rpx 0rpx 0rpx 0rpx;
                border-bottom:1px solid #e9e9e9;
                font-size:28rpx;
                font-family: Microsoft YaHei;
                color:#666;
                label{
                    width:130rpx;
                    padding-top:10rpx;
                }

                input{
                    padding: 4rpx 0rpx 0rpx 30rpx;
                    width:600rpx;
                }
            }
        }
    }


</style>
